<template>
	<view class="select-menu" @click="handleClick">
		<view v-if="data" class="value">
			{{ data }}
		</view>
		<view v-else class="placeholder">
			请输入宠物价值
		</view>
		<view class="unit">
			元
		</view>
	</view>
	<up-popup :show="show" mode="center" @close="show = false" :safeAreaInsetBottom="false">
		<view class="popup">
			<image class="popup-top-bj" src="@/static/image/popup-bj.png"></image>
			<view class="popup-content">
				<view class="title">
					宠物价值
				</view>
				<input type="number" v-model="patValue" placeholder="请输入宠物价值"
					placeholder-style="color: #D7D3D3">
				<view class="desc">
					*根据宠物价值计算保价费。物品丢损最高按填写的价值赔偿，请据实填写。订单成交保价费不退。
				</view>
				<view class="popup-bottom">
					<view class="">
						<up-button @click="show = false" type="info" text="取消"></up-button>
					</view>
					<view class="">
						<up-button @click="handleSumbit" type="primary" text="确定"></up-button>
					</view>
				</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const props = defineProps({
		data: {
			type: [String, Number],
			default: ''
		}
	})
	const show = ref(false)
	const patValue = ref('')
	const emits = defineEmits(['change'])
	const handleClick = () => {
		patValue.value = props.data
		show.value = true
	}
	const handleSumbit = () => {
		show.value = false
		emits('change', patValue.value)
	}
</script>

<style lang="scss" scoped>
	.popup-content {
		input {
			border: 1px solid #F6F6F6;
			height: 100rpx;
			border-radius: 14rpx;
			text-align: center;
		}

		.desc {
			text-align: left;
			margin-top: 40rpx;
			white-space: initial;
		}
	}
</style>